<!--
  * 门店表
  *
  * @Author:    zhoujk
  * @Date:      2025-01-26 06:40:44
-->
<template>
  <a-modal :width="700" :open="visibleFlag" @cancel="onClose" :maskClosable="false" :destroyOnClose="true" :footer="false">
    <template #title>
      <div ref="modalTitleRef" style="width: 100%; cursor: move; display: flex; justify-content: space-between">
        <div style="font-size: 18px">查看门店信息</div>
        <div style="width: 80%; display: flex; justify-content: space-around; font-weight: 400; font-size: 14px; align-items: flex-end">
          <div style="font-weight: 400">状态：{{ form.storeName }}</div>
          <div>入网时间：{{ formatTime(form?.cTime) }}</div>
        </div>
      </div>
    </template>
    <a-descriptions style="padding: 10px 30px" :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }">
      <a-descriptions-item label="登录账号">{{ form.no }}</a-descriptions-item>
      <a-descriptions-item label="门店名称">{{ form.storeName }}</a-descriptions-item>
      <a-descriptions-item label="所属代理商">{{ form.agentInfo.companyName }}</a-descriptions-item>
      <a-descriptions-item label="代理商等级">{{ form.agentInfo.level }}</a-descriptions-item>
      <a-descriptions-item label="代理商联系人">{{ form.agentInfo.name }}</a-descriptions-item>
      <a-descriptions-item label="代理商联系号码">{{ form.agentInfo.phone }}</a-descriptions-item>
      <a-descriptions-item label="门店联系人">{{ form.name }}</a-descriptions-item>
      <a-descriptions-item label="门店联系号码">{{ form.phone }}</a-descriptions-item>
      <a-descriptions-item :span="6" label="门店地址">{{ form.area }}{{ form.addr }}</a-descriptions-item>
      <a-descriptions-item :span="6" label="备注">{{ form.remark }}</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script setup>
  import { reactive, ref } from 'vue'
  import _ from 'lodash'
  import { storeApi } from '/@/api/business/b-merchant/store/store-api'
  import dayjs from 'dayjs'

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList'])

  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false)

  function show(rowData) {
    Object.assign(form, formDefault)
    if (rowData && !_.isEmpty(rowData)) {
      storeApi.findOne({ id: rowData.id }).then((res) => {
        Object.assign(form, res.data)
      })
    }
    // 使用字典时把下面这注释修改成自己的字典字段 有多个字典字段就复制多份同理修改 不然打开表单时不显示字典初始值
    // if (form.status && form.status.length > 0) {
    //   form.status = form.status.map((e) => e.valueCode)
    // }
    visibleFlag.value = true
  }

  function onClose() {
    Object.assign(form, formDefault)
    visibleFlag.value = false
  }

  // ------------------------ 表单 ------------------------

  const formDefault = {
    no: undefined, //门店账号
    pwd: undefined, //门店密码
    storeName: undefined, //门店名称
    storeAbbrName: undefined, //门店简称
    type: undefined, //门店类型
    areaCode: undefined, //城市，所属区/县ID
    addr: undefined, //地址
    status: undefined, //门店状态，0启用，1禁用
    name: undefined, //名字
    phone: undefined, //电话
    remark: undefined, //备注
    cTime: undefined, //备注
    agentInfo: {
      companyName: undefined,
      level: undefined,
      name: undefined,
      phone: undefined,
    },
  }

  let form = reactive({ ...formDefault })

  // 格式化函数（组合式API）
  const formatTime = (timestamp) => {
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
  }

  defineExpose({
    show,
  })
</script>
